<template>
	<div class="banner_data">
		<head-back-title title="轮播图详情"></head-back-title>
		<el-card>
			<el-form :model="bannerForm" ref="bannerForm" :rules="bannerFormRules" label-width="120px">
				<el-row><div class="title">轮播图基本信息</div></el-row>

				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="类型:" prop="client">
							<el-select v-model="bannerForm.client" placeholder="请选择类型">
								<el-option v-for="item in clientList" :key="item.client" :label="item.label" :value="item.client"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="24" :sm="20" :lg="14">
						<el-form-item label="名称:"><el-input v-model="bannerForm.remark" placeholder="请输入名称"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="24" :sm="20" :lg="14">
						<el-form-item label="链接:" prop="link"><el-input v-model="bannerForm.link" placeholder="请输入https://或者http://开头的链接"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="排序:" prop="sort"><el-input v-model="bannerForm.sort" placeholder="请输入排序"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="18" :sm="10" :lg="5">
						<el-form-item label="状态:" prop="is_online">
							<el-select v-model="bannerForm.is_online" placeholder="请选择">
								<el-option v-for="item in options" :key="item.is_online" :label="item.label" :value="item.is_online"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="24" :sm="20" :lg="14">
						<el-form-item label="备注:"><el-input v-model="bannerForm.brief" placeholder="请输入备注"></el-input></el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="上传图片:" class="upload-box" prop="image">
							<div class="case-img-upload">
								<div class="case-img-upload-btns">
									<el-upload
										ref="upload"
										action="fakeaction"
										:show-file-list="false"
										:http-request="function(res) {return upload(res);}" multipleaccept="image/*" :on-change="onchange">
										<el-button type="primary" size="small">上传图片</el-button>
									</el-upload>
									<el-button type="danger" size="small" @click="rest">重置</el-button>
									<div class="el-upload__tip">小于1MB</div>
								</div>
								<div class="case-img-upload-imgs-info">
									<el-image v-if="!image.length"><div slot="error"></div></el-image>
									<div class="vice_big_box" v-else><el-image :src="image" fit="contain"></el-image></div>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-button type="primary" @click="submitForm('bannerForm')" style="margin-left: 40px;" v-if="this.$route.query.isAdd == 1">添加</el-button>
				<el-button type="primary" @click="submitForm('bannerForm')" style="margin-left: 40px;" v-else>修改</el-button>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			image: '',
			bannerForm: {
				link: '',
				sort: '',
				is_online: '',
				client: '',
				image: '',
				store_id: localStorage.getItem('store_id'),
				remark:'',
				brief:''
			},
			link: '',
			sort: '',
			options: [
				{
					is_online: 1,
					label: '上架'
				},
				{
					is_online: 2,
					label: '下架'
				}
			],
			clientList: [
				{
					client: 1,
					label: 'APP'
				},
				{
					client: 2,
					label: '小程序'
				},
				{
					client: 3,
					label: 'PC商城'
				},
				{
					client: 4,
					label: '公众号'
				},
				{
					client: 5,
					label: 'B端咨询'
				},
				{
					client: 7,
					label: 'B端招商轮播图'
				},
				{
					client:9,
					label:'家配大师'
				},
				{
					client: 8,
					label: '默认'
				}
			],
			bannerFormRules: {
				sort: [{ required: true, message: '请输入排序' }],
				is_online: [{ required: true, message: '请选择状态' }],
				client: [{ required: true, message: '请选择类型' }],
				image: [{ required: true, message: '请上传图片' }]
			}
		};
	},
	methods: {
		// 图片上传
		upload(params) {
			//console.log(params);
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}

			this.bannerForm.image = new FormData();
			this.bannerForm.image.append('file[]', file);
		},
		onchange(file, fileList) {
			var event = event || window.event;
			var file = event.target.files[0];
			var reader = new FileReader();
			//转base64
			reader.onload = e => {
				this.image = e.target.result; //将图片路径赋值给src
			};
			reader.readAsDataURL(file);
		},

		// 重置图片
		rest(type) {
			this.image = '';
		},
		//提交
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.$route.query.isAdd == 0) {
						if (this.image == this.bannerForm.image) {
							this.$http(this.$ApiList.bannerDown, this.bannerForm).then(res => {
								if (res.code == 200) {
									this.$layer.msg('修改成功');
									this.$router.push('/banner_list');
								}
							});
						} else {
							this.$http(this.$ApiList.publicUpload, this.bannerForm.image).then(res => {
								if (res.code == 200) {
									this.bannerForm.image = res.datas[0];
									this.$http(this.$ApiList.bannerDown, this.bannerForm).then(res => {
										if (res.code == 200) {
											this.$layer.msg('提交成功');
											this.$router.push('/banner_list');
										}
									});
								}
							});
						}
					} else {
						this.$http(this.$ApiList.publicUpload, this.bannerForm.image).then(res => {
							if (res.code == 200) {
								this.bannerForm.image = res.datas[0];
								this.$http(this.$ApiList.addbanner, this.bannerForm).then(res => {
									if (res.code == 200) {
										this.$layer.msg('添加成功');
										this.$router.push('/banner_list');
									}
								});
							}
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		getBannerDetails(id) {
			let data = {
				id: id,
				store_id:localStorage.getItem('store_id')
			};
			this.$http(this.$ApiList.bannerList, data).then(res => {
			this.bannerForm = res.datas[0];
			this.image = res.datas[0].image;
			});
		}
	},
	created() {
		if (this.$route.query.isAdd == 0) {
			this.getBannerDetails(this.$route.query.id);
		}
	}
};
</script>
<style lang="scss">
.banner_data {
	.last {
		margin-bottom: 0;
	}
	.upload-drag {
		.el-upload {
			vertical-align: top;
		}
		.el-upload__tip {
			line-height: normal;
		}
	}
	.case_upload {
		display: flex;
		flex-wrap: wrap;
		.el-col {
		}
	}
	.el-select {
		display: block;
	}
	.upload-box {
		padding-left: 40px;
		.case-img-upload {
			display: flex;
			.case-img-upload-imgs {
				flex: 1;
				align-items: flex-start;
				.el-image {
					width: 140px;
					height: 140px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					vertical-align: top;
				}
			}
			.case-img-upload-imgs-info {
				width: 100%;
				max-width: 660px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				min-height: 390px;
				.case-img-upload-imgs-info-box {
					position: relative;
					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.el-image {
					width: 100%;
					vertical-align: top;
				}
			}
			.vice_big_box {
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-bottom: 20px;
				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
		.el-upload__tip {
			width: 80px;
			text-align: center;
		}
		.el-form-item__label {
			float: none;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			.el-button--danger {
				width: 80px;
				background-color: #37c1d6;
				border-color: #37c1d6;
			}
		}
	}
}
</style>
